<template>

  <div class="hotRecomment w-1200">
    <div class="content">
      <div class="head-box">
        <img src="@/static/easydrug/homePage/hot_rec_icon.png" />
        <span class="title">热门推荐</span>
      
      </div>
      <div class="hotRec-list">
        <div v-for="(item, index) in hotRecommentList" :key="index" class="hotRec-item">
          <img class="brug-img" :src="item.img" />
          <div class="identification-box">
            <img class="otc_icon" src="@/static/easydrug/homePage/otc_icon.png" />
            <img class="jia_icon" src="@/static/easydrug/homePage/jia_icon.png" />
            <img class="su_icon" src="@/static/easydrug/homePage/su_icon.png" />
            
          </div>
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="tablet-box">
              <div class="tablet">{{ item.tablet }}</div>
              <div class="soldCount">已售{{ item.soldCount }}件</div>
            </div>
            <div class="price-box">
              <div class="price"><span class="price-unit">￥</span>{{ item.price }}</div>
              <div class="retailPrice">建议零售价:￥{{ item.retailPrice }}</div>
            </div>
            <div class="companyName">{{ item.companyName }}</div>
            <div class="effectiveDate">效期优于:{{ item.effectiveDate }}</div>
            <div class="btns">
              <el-input-number class="input-number" v-model="item.num" @change="handleChange"></el-input-number>
              <el-button class="btn">加入购物车</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "hotRecommentDisplay",
  components: {

  },
  props: [],
  data() {
    return {
      hotRecommentList: []
    };
  },
  computed: {

  },
  watch: {},

  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.hotRecommentList = [
        this.getDemoName('布洛芬缓释胶囊'),
        this.getDemoName('感力清磷酸奥司他韦胶囊'),
        this.getDemoName('仁和可立复方氨酚烷胺胶囊'),
        this.getDemoName('布洛芬缓释胶囊'),
        this.getDemoName('感力清磷酸奥司他韦胶囊'),
      ]
      console.log("this.hotRecommentList=", this.hotRecommentList)
    },

    getDemoName(name) {
      return {
        img: require("@/static/easydrug/homePage/common.png"),
        name,
        tablet: '0.8G*64片(盒)',
        soldCount: 800,
        price: 39.50,
        retailPrice: 49.80,
        companyName: '江中药业股份有限公司',
        effectiveDate: '2026-02-28',
        num: 10,
        hotRecommentingCount: 543
      }
    },
    handleChange(value) {
      console.log(value);
    }
  },
};
</script>
<style scoped lang="less">
.hotRecomment {
  height: auto;
  display: flex;
  max-width: @width;
  flex-direction: column;

  .content {
    width: 100%;
    margin-top: 24px;

    .head-box {
      display: flex;
      align-items: center;

      img{
        width:30px;
        height:36px;
        vertical-align: middle;
      }

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
        vertical-align: middle;
        margin-left:12px;
      }

    
    }

    .hotRec-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .hotRec-item {
        margin-top: 24px;
        margin-right: 15px;
        display: flex;
        width: 228px;
        flex-direction: column;
        background: #fff;
        position: relative;

        .brug-img {
          width: 228px;
          height: 228px;
        }

        .identification-box {
          position: absolute;
          top: 10px;
          right: 10px;

          .otc_icon {
            width: 26px;
            height: 14px;
            vertical-align: middle;
            margin-right:4px;
          }
          .jia_icon {
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-right:4px;
          }
          .su_icon {
            width: 16px;
            height: 16px;
            vertical-align: middle;
          }

        }

        .info {
          padding: 12px 12px 12px 12px;

          .name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #333333;
          }

          .tablet-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            align-items: center;

            .tablet {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #EF1F1F;
              background: #FFF1F0;
              border-radius: 3px 3px 3px 3px;
              padding:2px 8px;
            }

            .soldCount {
              font-family: Arial, Arial;
              font-weight: 400;
              font-size: 13px;
              color: #ABABAB;
              line-height: 22px;
              text-align: left;
            }
          }

          .price-box {
            margin-top: 8px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price-unit {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #EF1F1F;
            }

            .price {
              font-family: DIN Alternate, DIN Alternate;
              font-weight: bold;
              font-size: 22px;
              color: #EF1F1F;
            }

            .retailPrice {
              font-family: Arial, Arial;
              font-weight: 400;
              font-size: 12px;
              color: #666666;
            }
          }

          .companyName {
            margin-top: 8px;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }

          .effectiveDate {
            margin-top: 8px;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }

          .btns {
            margin-top: 10px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .input-number {
              width: 104px !important;
              height: 30px !important;
              line-height: 28px !important;

              /deep/ .el-input__inner {
                height: 30px !important;
                line-height: 30px !important;
                padding-left: 10px !important;
                padding-right: 10px !important;
              }

              /deep/ .el-input-number__decrease {
                width: 30px !important;
              }

              /deep/ .el-input-number__increase {
                width: 30px !important;
              }
            }

            .btn {
              height: 30px !important;
              padding: 3px 10px !important;
              background: #EF1F1F;
              border-radius: 4px 4px 4px 4px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }


        &:nth-child(5n) {
          margin-right: 0px !important;
        }
      }
    }
  }
}
</style>
